<template>
    <div class="rightsList_container">
        <el-row type="flex" align="middle">
            <el-col :span="1" :offset="10">
                <i class="el-icon-unlock"></i>
            </el-col>
            <el-col :span="3">
                <h1>权限列表</h1>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="22" :offset="1">
                <el-table
                    :data="rightsList"
                    :border="true"
                    :stripe="true"
                    align="center"
                    class="rightsListTable"
                    height="44vh"
                >
                    <el-table-column
                        label="序号"
                        type="index"
                        width="55"
                    >
                    </el-table-column>
                    <el-table-column
                        v-for="item in tableinfo"
                        :key="item.index"
                        :prop="item.rightsInfoItem"
                        :label="item.rightsInfoTD"
                        :min-width="item.rightsTDWith"
                        sortable
                    >
                    </el-table-column>
                    <el-table-column
                        :label="' \0 \0 \0 \0 权限等级'"
                        prop="level"
                        min-width="60"
                        :filters="[
                        { text: '级别一', value: '2' },
                        { text: '级别二', value: '1' },
                        { text: '级别三', value: '0' },
                        ]"
                        :filter-method="filterTag"
                        filter-placement="right"
                    >
                        <template v-slot="labelDate">
                            <el-tag
                                v-for="item in labelItems.slice(parseInt(labelDate.row.level), parseInt(labelDate.row.level)+1)"
                                :key="item.label"
                                :type="item.type"
                                effect="dark"
                                disable-transitions
                            >
                                {{ item.label }}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="20" :offset="2">
                <hr/>
            </el-col>
        </el-row>
        <el-row type="flex" align="middle">
            <el-col :span="2" :offset="2">
                <p class="bottomText">共计 <span style="color:#409eff">{{rightsCount}}</span> 条</p>
            </el-col>
            <el-col :span="2" :offset="12">
                <p class="bottomText">*权限等级高低:</p>
            </el-col>
            <el-col :span="4" style="margin-top:-4px">
                <span v-for="(item , index ) in labelItems.slice().reverse()"
                    :key="item.label" >
                <el-tag
                    size="mini"
                    :type="item.type"
                    effect="dark"
                >
                    {{ item.label }}
                </el-tag>
                <span v-show="index<2" > > </span>
                </span>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default({
    name:'rightslist',
    data(){
        return{
            rightsCount: 0,
            rightsList: [],
            tableinfo : [
                {
                    rightsInfoItem: 'id',
                    rightsInfoTD: ' \0 \0 \0 \0 权限ID',
                    rightsTDWith: '26'
                },
                {
                    rightsInfoItem: 'authName',
                    rightsInfoTD: ' \0 \0 \0 \0 权限名称',
                    rightsTDWith: '48'
                },
                {
                    rightsInfoItem: 'path',
                    rightsInfoTD: ' \0 \0 \0 \0 路径',
                    rightsTDWith: '60'
                }
            ],
            labelItems: [
                { type: '', label: '级别三' },
                { type: 'success', label: '级别二' },
                { type: 'danger', label: '级别一' }
            ]
        }
    },
    created(){
        this.getrightsList();
    },
    methods: {
        async getrightsList(){
            const { data: res } = await this.$http.get('rights/list');
            if(res.meta.status == 200){
                this.rightsList = res.data
                this.rightsCount = res.data.length
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '获取权限列表失败！'
                    }
                )
            }
        },
        filterTag(value, row) {
            return row.level === value;
        },
    }
})
</script>

<style lang="less" scoped>
    .rightsList_container{
        width: 80vw;
        text-align: center;
        background-color: #fff;
        padding: 15px 30px;
        margin:5vh auto;
        border-radius: 15px;
        box-shadow: 0 1px 15px #cbcbcb;
        h1{
            color: #3a2c3b;
            letter-spacing: 6px;
        }
        hr{
            background-color: #2495e7;
            height: 1px;
        }
        .rightsListTable{
            width: 65vw;
            margin: 10px auto 28px auto;
        }
        .bottomText{
            font-size: 14px;
            font-weight: bold;
        }
    }
</style>